<template>
    <div>
        <el-form ref="festivalData" :model="festivalData" label-width="80px">
            <el-form-item label="节日名称">
                <el-input v-model="festivalData.name" class="custominput"></el-input>
            </el-form-item>
            <el-form-item label="过节时间">
                <el-input v-model="festivalData.holiday" class="custominput"></el-input>
            </el-form-item>
            <el-form-item label="标题描述">
                <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="festivalData.titleDesc"
                    class="custominput"></el-input>
            </el-form-item>
            <el-form-item label="来历描述">
                <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="festivalData.originDesc"
                    class="custominput"></el-input>
            </el-form-item>
            <el-form-item label="传说描述">
                <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="festivalData.legendDesc"
                    class="custominput"></el-input>
            </el-form-item>

            <el-form-item label="名称配图">
                <el-upload class="upload-demo" action="" :on-remove="removeNameImg" :http-request="nameUpload"
                    :file-list="namePicture" list-type="picture" :on-change="changeNameImg">
                    <el-button size="small" type="primary" round class="revertbtn">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="主页配图">
                <el-upload class="upload-demo" action="" :on-remove="removeHomeImg" :http-request="homeUpload"
                    :file-list="homePicture" list-type="picture" :on-change="changeHomeImg">
                    <el-button size="small" type="primary" round class="revertbtn">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="标题配图">
                <el-upload class="upload-demo" action="" :on-remove="removeTitleImg" :http-request="titleUpload"
                    :file-list="titlePicture" list-type="picture" :on-change="changeTitleImg">
                    <el-button size="small" type="primary" round class="revertbtn">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="来历配图">
                <el-upload class="upload-demo" action="" :on-remove="removeOriginImg" :http-request="originUpload"
                    :file-list="originPicture" list-type="picture" :on-change="changeOriginImg">
                    <el-button size="small" type="primary" round class="revertbtn">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="传说配图">
                <el-upload class="upload-demo" action="" :on-remove="removeLegendImg" :http-request="legendUpload"
                    :file-list="legendPicture" list-type="picture" :on-change="changeLegendImg">
                    <el-button size="small" type="primary" round class="revertbtn">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <br>
            <el-button type="primary" round class="revertbtn" @click="saveFestival()">保存</el-button>
        </el-form>
    </div>
</template>

<script>
export default ({
    name: "FestivalAddorEdit",
    props: [],
    data() {
        return {
            islogin: false,
            bucketName: "festivalintroduction-img",
            viewname: "FestivalList",
            festivalData: {
                name: "",
                holiday: "",
                namePicture: "",
                homePicture: "",
                titleDesc: "",
                titlePicture: "",
                originDesc: "",
                originPicture: "",
                legendDesc: "",
                legendPicture: "",
            },
            namePicture: [],
            homePicture: [],
            titlePicture: [],
            originPicture: [],
            legendPicture: [],
        };
    },
    created() {
    },
    methods: {
        getFestivalInfo(id) {
            this.$api.GetFestival({ id: id }).then((res) => {
                if (res.data.status === 200) {
                    this.festivalData = res.data.data
                    this.namePicture.push({ name: res.data.data.namePicture, url: `${res.data.data.namePicture}` })
                    this.homePicture.push({ name: res.data.data.homePicture, url: `${res.data.data.homePicture}` })
                    this.titlePicture.push({ name: res.data.data.titlePicture, url: `${res.data.data.titlePicture}` })
                    this.originPicture.push({ name: res.data.data.originPicture, url: `${res.data.data.originPicture}` })
                    this.legendPicture.push({ name: res.data.data.legendPicture, url: `${res.data.data.legendPicture}` })
                    return true;
                } else {
                    this.$message({
                        message: `添加失败,${res.data.msg}`,
                        type: "error",
                    });
                    return false;
                }
            })
        },
        clearFestivalData() {
            this.festivalData = {}
            this.namePicture = []
            this.homePicture = []
            this.titlePicture = []
            this.originPicture = []
            this.legendPicture = []
        },
        saveFestival() {
            if (Object.keys(this.festivalData).length === 0) {
                this.$message({
                    message: "请上传对应配图以及填写完整对应描述",
                    type: "error",
                });
                return;
            }
            for (var key in this.festivalData) {
                if (this.festivalData[key] === "") {
                    this.$message({
                        message: "请上传对应配图以及填写完整对应描述",
                        type: "error",
                    });
                    return;
                }
            }
            this.$api.AddFestival(this.festivalData).then((res) => {
                if (res.data.status === 200) {
                    this.$message({
                        message: "保存成功",
                        type: "success",
                    });
                    this.$parent.goBack();
                } else {
                    this.$message({
                        message: `保存失败,${res.data.msg}`,
                        type: "error",
                    });
                    return false;
                }
            })
        },

        //#region 异步上传图片的方法
        async nameUpload(params) {
            this.festivalData.namePicture = await this.upload(params);
        },
        async homeUpload(params) {
            this.festivalData.homePicture = await this.upload(params);
        },
        async titleUpload(params) {
            this.festivalData.titlePicture = await this.upload(params);
        },
        async originUpload(params) {
            this.festivalData.originPicture = await this.upload(params);
        },
        async legendUpload(params) {
            this.festivalData.legendPicture = await this.upload(params);
        },

        //#endregion

        upload(params) {
            const formData = new FormData()
            formData.append("file", params.file)
            formData.append("bucketName", this.bucketName)
            return this.$api.Upload(formData).then((res) => {
                if (res.data.status === 200) {
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                    return res.data.data
                } else {
                    this.$message({
                        message: `上传失败,${res.data.msg}`,
                        type: "error",
                    });
                    return ""
                }
            })
        },
        DeleteImg(name) {
            this.$api.DeleteImg({ bucketName: this.bucketName, objName: name }).then((res) => {
                if (res.data.status === 200) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: `删除失败,${res.data.msg}`,
                        type: "error",
                    });
                    return false;
                }
            });
        },

        //通过正则获取正确的文件名
        getName(name) {
            var result = name.match("festivalintroduction-img_.*")[0];
            return result;
        },

        //#region 删除对应图片的方法

        removeHomeImg() {
            this.DeleteImg(this.getName(this.homePicture[0].name))
        },
        removeNameImg() {
            this.DeleteImg(this.getName(this.festivalData.namePicture))
        },
        removeTitleImg() {
            this.DeleteImg(this.getName(this.titlePicture[0].name))
        },
        removeOriginImg() {
            this.DeleteImg(this.getName(this.originPicture[0].name))
        },
        removeLegendImg() {
            this.DeleteImg(this.getName(this.legendPicture[0].name))
        },

        //#endregion

        //#region 更改图片时触发的方法，去除多余的图片

        changeHomeImg(file, homePicture) {
            this.homePicture = homePicture.slice(-1);
        },
        changeNameImg(file, namePicture) {
            this.namePicture = namePicture.slice(-1);
        },
        changeTitleImg(file, titlePicture) {
            this.titlePicture = titlePicture.slice(-1);
        },
        changeOriginImg(file, originPicture) {
            this.originPicture = originPicture.slice(-1);
        },
        changeLegendImg(file, legendPicture) {
            this.legendPicture = legendPicture.slice(-1);
        }

        //#endregion
    }
})
</script>

<style scoped>
.custominput {
    border-radius: 5px;
    border: 1px solid #e11057;
    outline: medium;
}

.custominput>>>.el-input__inner {
    border: none;
    outline: none;
}

.revertbtn {
    display: block;
    margin: 0 auto;
    width: 100px;
    font-weight: bold;
    color: #e11057;
    transition: all 0.5s;
    background-color: #fef6e7;
    border: 1px solid #e11057;
}

.revertbtn:hover {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}

.revertbtn:focus {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}
</style>